﻿<UserControl x:Class="CodeAngel.UI.ListItemControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    mc:Ignorable="d"
    d:DesignHeight="30" d:DesignWidth="400">
    
    <UserControl.Resources>

        <SolidColorBrush x:Key="ItemBorderBrush" Color="Black" />
        <SolidColorBrush x:Key="ItemBackgroundBrush" Color="Transparent" />
        
        <Style x:Key="ClearButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>             
        
		<ControlTemplate x:Key="DeleteButtonControlTemplate" TargetType="Button">
			<Grid x:Name="grid" Height="20" Width="20">
				<VisualStateManager.VisualStateGroups>                    
					<VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" />
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Disabled">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
							</Storyboard>                            
                        </VisualState>
						<VisualState x:Name="Normal">
							<Storyboard>
								<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="MouseOver">
							<Storyboard>
								<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Pressed"/>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
                
                <Image Stretch="UniformToFill" Source="../Images/Delete_24.png" Margin="2" />
			</Grid>
		</ControlTemplate>           
        
    </UserControl.Resources>
    
    <Grid Margin="1">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" >
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="MouseBackgroundElement" Storyboard.TargetProperty="Opacity" To="0" />
                        <DoubleAnimation Storyboard.TargetName="ButtonsPanel" Storyboard.TargetProperty="Opacity" To=".5" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="MouseBackgroundElement" Storyboard.TargetProperty="Opacity" To="1" />
                        <DoubleAnimation Storyboard.TargetName="ButtonsPanel" Storyboard.TargetProperty="Opacity" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>     
        

    	<i:Interaction.Triggers>
    		<i:EventTrigger EventName="MouseEnter">
    			<ei:GoToStateAction StateName="MouseOver"/>
    		</i:EventTrigger>
    		<i:EventTrigger EventName="MouseLeave">
    			<ei:GoToStateAction StateName="Normal"/>
    		</i:EventTrigger>
    	</i:Interaction.Triggers>


        <Rectangle x:Name="NormalBackgroundElement" Stroke="{StaticResource ItemBorderBrush}" StrokeThickness="1.5" RadiusX="3" RadiusY="3" Fill="{StaticResource ItemBackgroundBrush}" Opacity=".2"/>
        <Rectangle x:Name="MouseBackgroundElement" Stroke="Black" StrokeThickness="2" RadiusX="3" RadiusY="3" Fill="WhiteSmoke" Opacity="0"/>      
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Button x:Name="ContentPlaceholder" Style="{StaticResource ClearButtonStyle}" Click="RaiseClickEvent" />
            <Button Click="RaiseClickEvent" Opacity="0"/>

            <StackPanel x:Name="ButtonsPanel" Orientation="Horizontal" Grid.Column="1" Margin="0,4,0,0" VerticalAlignment="Top" Opacity=".4">
                <!--<Button x:Name="OpenButton" Click="RaiseClickEvent" Template="{StaticResource OpenButtonControlTemplate}" Grid.Column="0" Margin="0,0,2,0" />-->
                <Button x:Name="DeleteButton" Click="RaiseDeleteEvent" Template="{StaticResource DeleteButtonControlTemplate}" Grid.Column="1"   />
            </StackPanel>

        </Grid>
        
        <!-- Marked as Deleted -->
        <Grid x:Name="MarkedAsDeletedPanel" Visibility="Collapsed" Opacity="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Rectangle Fill="Red" Opacity=".75" Grid.ColumnSpan="2" />
            <TextBlock Text="Marked as Deleted" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,0,0,0"/>
            <Button Content="Undo Delete" Margin="2" Opacity=".9" Click="UndoMarkedAsDeleted" VerticalAlignment="Center" HorizontalAlignment="Right" />

        </Grid>

    </Grid>
    
    
</UserControl>
